<template>
	<view class="wrap safe-tab">
		 <view class="box dis-flex flex-dir-column flex-x-center flex-y-center">
		 	<view class="f-42 fb c-25">
		 		登录后更精彩
		 	</view>
			
			<view class="phone-bg dis-flex flex-y-center">
				<view class="c-25 fb f-36">
					+86
				</view>
				
				<image src="../../static/images/login/arrow_down.png" class="arrow"></image>
				
				<input class="phone c-25 f-34" placeholder="请输入手机号" placeholder-class="f-34 c-BB" type="tel" maxlength="11" v-model="phone" />
			</view>
			
			<view class="code-bg dis-flex flex-y-center">
				<input class="code c-25 f-34" :password="true" placeholder="请输入验证码" placeholder-class="f-34 c-BB" type="safe-password" v-model="code" />
				
				<view class="sendCode c-00 f-26" @click.stop="onGetCode">
					{{ countdown > 0 ? '再次发送('+countdown+')' : '立即发送' }}
				</view>
			</view>
			
			<view class="login bc-00 c-ff f-34" @click.stop="onLogin">
				登录
			</view>
			
			<view class="other-login clip dis-flex flex-y-center flex-x-between">
				<image src="../../static/imgs/wx.png"></image>
				<image src="../../static/imgs/qq.png"></image>
			</view>
			
		 </view>
		 
		 
		 <view class="wrap-agree dis-flex flex-x-center flex-y-center">
		 	<view class="choose" @click="onAgree">
				<image v-if="isAgree" src="../../static/images/comment/choose_select.png"></image>
		 		<image v-else src="../../static/images/comment/choose_normal.png"></image>
		 	</view>
			
			<view class="c-7E aa f-24">
				我已阅读并同意
			</view>
			
			<view class="bb f-24" @click.stop="onUserAgree('user')">
				《用户协议》
			</view>
			
			<view class="bb f-24" @click.stop="onUserAgree('privacy')">
				《隐私政策》
			</view>
			
		 </view>
		 
	</view>
</template>

<script>
	
	import {
		sendCode,
		codeLogin
	} from "../../api/login.js";
	import st from "../../utlis/showtoast.js";
	
	export default {
		name: 'login',
		data() {
			return {
				isFirst: true,
				phone: "",
				code: "",
				isAgree : true,
				countdown: 0, //倒计时
				phonekey: "", //获取验证码返回的
			}
		},
		onLoad() {
		},
		onReady() {
			this.isFirst = false
		},
		onShow() {
			if (!this.isFirst) {
				return;
			}
			//页面没有显示的时候 进行判断
			let token = uni.getStorageSync("token") || ""
			if (token != "") {
				uni.switchTab({
					url: "/pages/index/index"
				})
			}
		},
		methods: {
			/**
			 * 协议
			 */
			onAgree() {
				this.isAgree = !this.isAgree
			},
			/**
			 * 用户协议 隐私政策
			 */
			onUserAgree(type) {
				uni.navigateTo({
					url: "/pages/login/agreement?type=" + type
				})
			},
			/**
			 * 获取验证码
			 */
			async onGetCode() {
				if(this.countdown>0) return
				if (this.phone == "") {
					st.show("请输入手机号")
					return
				}
				if (this.isAgree == "") {
					st.show("请阅读并同意《用户协议》和《隐私政策》")
					return
				}
				let res = await sendCode(this.phone)
				if (res.code == 1) {
					this.phonekey = res.data
					st.success(res.msg)
					this.startCountdown()
				}
			},
			/**
			 * 倒计时
			 */
			startCountdown() {
				this.countdown = 60;
				const countdownInterval = setInterval(() => {
					if (this.countdown > 0) {
						this.countdown--;
					} else {
						clearInterval(countdownInterval);
					}
				}, 1000);
			},
			/**
			 * 登录
			 */
			async onLogin() {
				if (this.phone == "") {
					st.show("请输入手机号")
					return
				}
				if (this.code == "") {
					st.show("请输入验证码")
					return
				}
				if (this.isAgree == "") {
					st.show("请阅读并同意《用户协议》和《隐私政策》")
					return
				}
				let res = await codeLogin(this.phone, this.code, this.phonekey)
				st.success(res.msg)
				let token = res.data.token
				let isFirst = parseInt(res.data.isFirst)
				uni.setStorageSync("token", token)
				if (isFirst == 1) {
					uni.navigateTo({
						url: "/pages/login/fillInfomation"
					})
				} else {
					uni.switchTab({
						url: "/pages/index/index"
					})
				}
			},
			
			
			//登录
			async submit() {
				await this.$refs.uForm.validate().then(res => {
					const requestData = {
						phone: this.ruleForm.account,
						code:this.ruleForm.password,
					};
					//验证码登录
					codeLogin(requestData).then(res=>{
						uni.showToast({
							title: res.msg,
							duration: 1500,
							icon: 'none'
						});
						//存入token
						console.log(res.data,'2222222222222222');
						setToken(res.data)
						uni.switchTab({
							url: '/pages/my/index'
						});
					});
					
				}).catch(errors => {
					console.log(errors)
				})
			}
		}
	}
</script>

<style lang="scss">
	.wrap {
		width: 100%;
		overflow: hidden;
		
		.box {
			width: 100%;
			height: 90vh;
			
			.phone-bg {
				margin-top: 42rpx;
				width: 550rpx;
				height: 124rpx;
				border-bottom: 2rpx solid #EEEEEE;
				
				.arrow {
					margin-left: 13rpx;
					width: 28rpx;
					height: 20rpx;
				}
				
				.phone {
					margin-left: 35rpx;
					flex: 1;
					height: 64rpx;
					text-align: left;
				}
			}
			
			.code-bg {
				width: 550rpx;
				height: 114rpx;
				border-bottom: 2rpx solid #EEEEEE;
				.code {
					flex: 1;
					height: 64rpx;
					text-align: left;
					margin-right: 20rpx;
				}
			}
			
			.login {
				margin-top: 85rpx;
				width: 610rpx;
				height: 86rpx;
				border-radius: 43rpx;
				overflow: hidden;
				line-height: 86rpx;
				text-align: center;
			}
		
		}
		
		.other-login {
			margin-top: 50rpx;
			width: 220rpx;
			height: 82rpx;
			overflow: hidden;
			>image {
				width: 82rpx;
				height: 82rpx;
			}
		}
		
		
		.wrap-agree {
			position: fixed;
			left: 0;
			bottom: calc(env(safe-area-inset-bottom) + 60rpx);
			width: 100%;
			.choose {
				width: 38rpx;
				height: 38rpx;
				>image {
					width: 100%;
					height: 100%;
				}
			}
		
			.aa {
				margin-left: 11rpx;
			}
			.bb {
				margin-left: 5rpx;
				color: #1D2C59;
			}
		}
		
	}
</style>